/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import "@gpt/components/prompt-word/index.scss";
/* types */
import { SettingGPTPromptWordItem } from "@gpt/types";
import { MAX_PROMPT_WORD_LENGTH } from "@gpt/model";

enum SettingGPTPromptWordHeaderEventEnum {
  Change = 'change',
  Click = 'click'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTPromptWordHeader,
  emits: [
    SettingGPTPromptWordHeaderEventEnum.Change,
    SettingGPTPromptWordHeaderEventEnum.Click
  ],
  props: {
    value: {
      type: Array as PropType<SettingGPTPromptWordItem[]>,
      default: () => []
    },
    onChange: {
      type: Function
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTPromptWordHeader]: true
      }
    },
    title(): string {
      return `提示词（${this.value.length}/${MAX_PROMPT_WORD_LENGTH}）`
    },
    subTitle(): string {
      return `将常用提示词推荐给用户（详见右图中的欢迎卡片），点击后可以一键发动技能`
    }
  },
  methods: {
    
  },
  render() {
    return (
      <div class={this.classNames}>
        <div class="setting-gpt-prompt-word-header-title">
          {this.title}
        </div>
        <div class="setting-gpt-prompt-word-header-sub-title">
          {this.subTitle}
        </div>
      </div>
    )
  }
});